<template>
  <view>
    <!-- 搜索栏 -->
    <view class="flex-b">
      <view class="search-box flex grey-light-bg-color b-r-10 l-h-80 p-l-20 m-l-20">
        <view>
          <text class="iconfont icon-sousuo grey-deep-font-color f-w f-s-14"></text>
        </view>
        <view>
          <input v-model="inputText" @input="getList()" @focus="setFlag()" @blur="setFlag()" maxlength="30"
            class="m-t-20 m-l-20" placeholder="搜索内容" />
        </view>
      </view>
      <view class="font-color-white m-r-10 main-bg-color l-h-80 t-a-c" style="height: 80rpx;width: 100rpx;"
        @click="search()">
        搜索
      </view>
    </view>
    <!-- 搜索内容 -->
    <view class="search-text" v-if="flag">
      <view v-for="(item,index) in searchList" :key="index" class="search-item p-all-20 b-light">
        {{item}}
      </view>
    </view>
    <!-- 历史记录 -->
    <view class="history-box p-all-20 grey-deep-font-color" v-else>
      <view class="flex-b m-t-20">
        <view>搜索历史</view>
        <view><text class="iconfont icon-shanchu f-s-16" @click="clearAll()"></text></view>
      </view>
      <view class="flex" style="flex-wrap: wrap;">
        <view @click="goHistory(item)" class="p-5-10 m-l-30 b-deep b-r-5 m-t-20" :key="index"
          v-for="(item,index) in historyList">
          {{item}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        flag: false, //true显示搜索内容false显示历史记录
        historyList: this.$store.state.search_historyList,
        inputText: '',
        timer: null, //防抖
        searchListAll: [ //模拟搜索的数据
          'a', 'ab', 'abc', 'abcd', 'abcde', 'abcdef', 'abcdefg'
        ],
        searchList: []
      };
    },
    methods: {
      // 设置显示历史记录或者内容
      setFlag() {
        this.flag = !this.flag
      },
      // 点击搜索按钮
      search() {
        if (this.inputText !== '') {
          this.$store.commit('setSearchHistoryList', this.inputText)
          this.historyList = [...new Set(this.historyList)]
          uni.navigateTo({
            url: "/subpkg/search-list/search-list?key=" + this.inputText
          })
          this.inputText = ''
        } else {
          uni.$showMsg('请输入内容后再搜索')
        }
      },
      // 清空历史记录
      clearAll() {
        const vm = this
        uni.showModal({
          title: '清空',
          content: '你确定要清空历史记录吗?',
          success: function(res) {
            if (res.confirm) {
              vm.$store.commit('clearSearchHistoryList')
              vm.historyList = []
            }
          }
        });
      },
      // 输入的时候获取内容
      getList() {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          // 发送请求
          this.searchList = this.searchListAll.filter(item => item.includes(this.inputText))
        }, 500)
      },
      goHistory(key) {
        this.$store.commit('setSearchHistoryList', key)
        this.historyList = [...new Set(this.historyList)]
        uni.navigateTo({
          url: "/subpkg/search-list/search-list?key=" + key
        })
      }
    },
    onShow() {
      this.flag = false
    }
  }
</script>

<style lang="scss">
  .search-box {
    width: 82%;
    height: 80rpx;
  }
</style>